﻿<!DOCTYPE html>
<html lang="en">
<HEAD><TITLE>云和租房 - 用户注册</TITLE>
    <META content="text/html; charset=utf-8" http-equiv=Content-Type>
    <LINK
            rel=stylesheet type=text/css href="../css/style.css">
    <META name=GENERATOR content="MSHTML 8.00.7601.17514">
    <link rel="stylesheet" href="../layer/theme/default/layer.css">
    <link rel="stylesheet" href="../layer/layer/mobile/need/layer.css">
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/messages_zh.js"></script>
    <script type="text/javascript" src="../layer/layer.js"></script>
</HEAD>

<BODY>
<DIV id=header class=wrap>
    <DIV id=logo><IMG src="../images/logo.gif"></DIV>
</DIV>
<DIV id=regLogin class=wrap>
    <DIV class=dialog>
        <DL class=clearfix>
            <DT>新用户注册</DT>
            <DD class=past>填写个人信息</DD>
        </DL>
        <DIV class=box>
            <FORM action=user!register.action id="commentFrom">
                <DIV class=infos>
                    <TABLE class=field>
                        <TBODY>
                        <TR>
                            <TD class=field>用 户 名：</TD>
                            <TD><INPUT class=text type=text name=name id="name" placeholder="输入用户名"><span
                                    id="yzname"><img src="../images/1.png"></span></TD>
                        </TR>
                        <TR>
                            <TD class=field>密　　码：</TD>
                            <TD><INPUT class=text type=password name=password id="password" placeholder="输入密码"><span
                                    id="yzpass"><img src="../images/1.png"></span></TD>
                        </TR>
                        <TR>
                            <TD class=field>确认密码：</TD>
                            <TD><INPUT class=text type=password name=repassword id="repassword" placeholder="确认密码"><span
                                    id="yzrepass"><img src="../images/1.png"></span></TD>
                        </TR>
                        <TR>
                            <TD class=field>手　　机：</TD>
                            <TD><INPUT class=text type=text name=telephone id="telephone"
                                       placeholder="手机号以13,14,17,18,15开头的11位数字"><span
                                    id="yztel"><img src="../images/1.png"></span></TD>
                        </TR>

                        </TBODY>
                    </TABLE>
                    <DIV class=buttons>
                        <input type="submit" value="注册" class="submit">
                    </DIV>
                </DIV>
            </FORM>
        </DIV>
    </DIV>
</DIV>
<DIV id=footer class=wrap>
    <DL>
        <DT>云和租房 © 2010 云和 京ICP证1000001号</DT>
        <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD>
    </DL>
</DIV>
</BODY>
<script>

    /*定义验证手机规则*/
    jQuery.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    });

    /*   /!*定义提交规则，如果用户名存在，则注册失败*!/
       jQuery.validator.addMethod("isexist",function (value,element) {
          var type = $("#type").val();
           $.ajax({
               url: "user",
               type: "POST",
               data: {name: $("#name").val(),type:type},
               success: function (data) {
                   if (data == "false") {
                       alert("该用户名可以使用");
                   } else {
                       layer.confirm('该账号已经被注册,现在去登录?',{
                           btn:['前去登录','留在这里']
                       },function () {
                           window.location.href="page/login.html";
                           },function () {
                           layer.closeAll();
                           return false;
                           }
                       )
                   }
               }
           })
       },"该账号已被注册");*/


    /*提交函数，当点击提交按钮的时候，触发ajax，判断用户是否存在，如果存在则提醒是否去登录页面*/
    function tijiao() {
        $.ajax({
            url: "user",
            type: "POST",
            data: {name: $("#name").val()},
            success: function (data) {
                if (data == "false") {
                    alert("注册成功");
                } else {
                    layer.confirm('该账号已经被注册,现在去登录?', {
                            btn: ['前去登录', '留在这里']
                        }, function () {
                            window.location.href = "../page/login.html";
                        }, function () {
                            layer.closeAll();
                            return false;
                        }
                    )
                }
            }
        })
    }


    /*将效验规则写到控件中 调用提交函数*/
    $.validator.setDefaults({
        submitHandler: function () {
            tijiao();
        }
    });
    /*在键盘按下并释放及提交后验证提交表单*/
    $().ready(function () {
        $("#commentFrom").validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 10
                },
                password: {
                    required: true,
                    minlength: 5,
                    maxlength: 15
                },
                repassword: {
                    required: true,
                    minlength: 5,
                    maxlength: 15,
                    equalTo: "#password"
                },

                telephone: {
                    required: true,
                    minlength: 11,
                    isMobile: true
                }

            },
            messages: {
                name: {
                    required: "用户名不能为空",
                    minlength: "用户名为2-10个字符",
                    maxlength: "用户名为2-10个字符"
                },
                password: {
                    required: "密码不能为空",
                    minlength: "密码为5-15个字符",
                    maxlength: "密码为5-15个字符"
                },
                repassword: {
                    required: "密码不能为空",
                    minlength: "密码为5-15个字符",
                    maxlength: "密码为5-15个字符",
                    equalTo: "两次密码输入不一致"
                },
                telephone: {
                    required: "请输入手机号",
                    minlength: "不能小于11个字符",
                    isMobile: "请填写正确的手机号码"
                }

            },
            errorElement: "span"

        })
    });

    $(function () {
        /*验证用户名为真*/
        yz("#name","#yzname");
        /*验证密码为真*/
        yz("#password","#yzpass");
        /*验证确认密码为真*/
        yz("#repassword","#yzrepass");
        /*验证电话为真*/
        yz("#telephone","#yztel")
    });
        /*封装验证方法*/
    function yz(element,obj) {
        $(element).blur(function () {
            var r = $(element).valid();
            if (r){
                $(obj).children().css("display","block");
            } else {
                $(obj).children().css("display","none");
            }
        })
    }

</script>


</HTML>
